<template>
  <div class="loginMidPage">
    <div class="loading-box">
      <a-spin size="large" />
      <div class="loadingText">加载中...</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-vue/es'
  import { useRoute, useRouter } from 'vue-router'

  import { loginApi } from '@/services/api'
  import { useUserInfoStore } from '@/store/index'

  const userInfoStore = useUserInfoStore()
  const router = useRouter()
  const route = useRoute()
  let queryObj = route.query

  const init = async () => {
    if ('code' in queryObj && 'state' in queryObj) {
      let res = await loginApi.wxCallback(route.query, { noJudgeCode: true })
      if (res.code === 'SYSTEM-100000') {
        // 建立链接通信
        userInfoStore.selectAndLink(res.data.token)
        userInfoStore.changeToken(res.data.token)
        await userInfoStore.getUserInfo()
        // 获取权限数据并赋值menu数据
        await userInfoStore.getMenuData()
        router.replace('/')
      } else {
        if (res.code === 'AUTH-100023') {
          router.push({
            path: '/bind-tel',
            query: {
              wxCode: res.headers['wechat-binding-code']
            }
          })
        } else {
          message.error(res.message)
          router.replace('/login')
        }
      }
    } else {
      message.error('微信授权失败')
      router.replace('/login')
    }
  }

  init()
</script>

<style lang="less" scoped>
  .loading-box {
    padding-top: 354px;
    margin: 0 auto;
    width: 360px;
    text-align: center;

    .loadingText {
      margin-top: 16px;
      color: rgba(0, 0, 0, 0.75);
    }
  }
</style>
